<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>${initParam.WxAppName}</title>
		<link href="${pageContext.request.contextPath}/bettery/css/jquery-ui.css" rel="stylesheet" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bettery/js/jquery.confirm/jquery.confirm.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bettery/css/life.css?v=192">
		<link href="${pageContext.request.contextPath}/bettery/css/jquery.bxslider.css" rel="stylesheet" />
		
		<script type="text/javascript" src="${pageContext.request.contextPath}/dewei/js/jquery.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/jquery.confirm/jquery.confirm.js"></script>
		<script src="${pageContext.request.contextPath}/bettery/js/jquery-ui-1.10.4.custom.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/jquery.bxslider.min.js"></script>
		
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/bettery_common.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/template.js"></script>
        
		<script type="text/javascript">
		
        </script>
        <style type="text/css">  
.mod_slider {
    background-color: #f7f7f7;
    height: 200px;
    overflow: hidden;
    padding: 10px 0;
    position: relative;
}
#slider img {
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 200px;
    padding: 0 5px;
}

.buy_area {
    background: none repeat scroll 0 0 #fff;
    overflow: hidden;
    padding: 2px 5px;
}

.buy_area .fn_wrap {
    border-top: 1px solid #ddd;
    padding-bottom: 12px;
    padding-top: 12px;
    padding-left: 10px;
    position: relative;
}

.buy_area .fn_wrap .fn {
    color: #333;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    max-height: 36px;
    overflow: hidden;
}

.fn_wrap .desc:after {
    background: none repeat scroll -78px -140px #f09;
    content: "";
    display: none;
    height: 10px;
    position: absolute;
    right: 5px;
    top: 6px;
    width: 14px;
}
.buy_area .price_wrap {
    line-height: 1.3;
    margin-bottom: 10px;
    padding: 0 10px;
}

.buy_area .tit {
    color: #333;
    font-size: 14px;
}

.buy_area .price_wrap .price {
    color: #e4393c;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    height: 16px;
    line-height: 1.3;
    margin-right: 10px;
    margin-top: -6px;
    vertical-align: middle;
}

.num_wrap {
    float: left;
    width: 150px;
}
.num_wrap span, .num_wrap input {
    background-color: #eee;
    border: 1px solid #ddd;
    float: left;
    height: 38px;
    line-height: 38px;
    position: relative;
    text-align: center;
    width: 38px;
}
.num_wrap .minus:after {
    background: none repeat scroll 0 0 #39312f;
    border-radius: 2px;
    content: "";
    height: 4px;
    left: 50%;
    margin-left: -8px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.num_wrap .minus_disabled:after {
    background: none repeat scroll 0 0 #938f8e;
}
.num_wrap .plus_disabled:after {
    background: none repeat scroll 0 0 #938f8e;
}

.num_wrap .num {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #fff;
    border-color: #ddd -moz-use-text-color;
    border-image: none;
    border-radius: 0;
    border-style: solid none;
    border-width: 1px 0;
    font-size: 16px;
    height: 38px;
    line-height: normal;
    text-align: center;
    width: 70px;
}
.num_wrap .plus:before {
    background: none repeat scroll 0 0 #39312f;
    border-radius: 2px;
    content: "";
    height: 16px;
    left: 50%;
    margin-left: -2px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 4px;
}
.num_wrap .plus:after {
    background: none repeat scroll 0 0 #39312f;
    border-radius: 2px;
    content: "";
    height: 4px;
    left: 50%;
    margin-left: -8px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 16px;
}

.sku_container {
    padding-top: 10px;
}
.sku_wrap {
    background: none repeat scroll 0 0 #fff;
    padding: 0 10px 10px;
    position: relative;
}
.btn_wrap:after, .sku_wrap:after, .detail_promote .promote_tag:after, .service_wrap .service_list:after, .detail_cmt .cmt_sku:after, .detail_cmt .cmt_att:after, .itm_list:after {
    clear: both;
    content: " ";
    display: block;
}

.sku_wrap h3 {
    color: #999999;
    float: left;
    font-size: 12px;
    font-weight: normal;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    width: 35px;
}


.sku_wrap .option {
    background: none repeat scroll 0 0 #fff;
    color: #333;
    float: left;
    font-size: 12px;
    height: 38px;
    line-height: 38px;
    margin: 0 10px 10px 0;
    overflow: hidden;
    padding: 0 7px;
    position: relative;
    text-align: center;
    word-break: break-all;
     min-width:width: 70px;
    overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.sku_num {
    overflow: hidden;
}

.num_wrap {
    float: left;
    width: 150px;
}

.buy_btns {
    display: table;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    width: 100%;
}
.buy_btns .btn-pane {
    display: table-cell;
    padding: 3px;
}
.buy_btn {
    background: none repeat scroll 0 0 #a7b2be;
    border-width: 0;
    box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.15) inset;
    color: #fff;
    font-weight: 600;
    font-size:14px;
    padding: 12px 12px;
    position: relative;
    transition: background 0.3s ease-in-out 0s;
    border-radius: 3px;
}
.buy_btns .btn-pane .buy_btn {
   width: 80%;
   display: inline-block;
}
.btn-warning {
    background-color: #f0ad4e;
    border-color: #eea236;
    color: #ffffff;
}
.btn-danger {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #ffffff;
}

.service_wrap {
    padding: 0 10px;
}
.service_wrap h3{
   padding:10px 0;
}
.detail_main{
   padding-bottom:55px;
}
        </style>
	</head>
	<body>
<div class="detail_main">	
	<input type="hidden" value="${lat}" name='lat' id="hiddenbLat" />
	<input type="hidden" value="${lng}" name='lng' id="hiddenbLng" />
	<input type="hidden" value="${id}" name='id' id="hiddenId" />
	
	<div class="mod_slider">
		<div id='slider'>
			<img src="${pageContext.request.contextPath}/bettery/img/category.jpg"	style="height: 200px; width: 160px">
			<img src="${pageContext.request.contextPath}/bettery/img/category.jpg"	style="height: 200px; width: 160px">
			<img src="${pageContext.request.contextPath}/bettery/img/category.jpg"	style="height: 200px; width: 160px">
			<img src="${pageContext.request.contextPath}/bettery/img/category.jpg"	style="height: 200px; width: 160px">
		</div>
	</div>
		<div class="wx_nav">
			<a class="nav_index on" href="main.do">购物</a>
			<a class="nav_shopcart"  href="queryMyCar.do">购物车</a>
			<a class="nav_me"  href="queryUserAddr.do">个人中心</a>
		</div>
	<div class="buy_area">
	    <div style="display: none" id="testtt"></div>
	    <div class="fn_wrap">
	        <h1 id="itemName" class="fn">${bean.name}</h1>
	        <div id="itemDesc" class="desc"></div>
	    </div>
	
	    <div class="price_wrap">
	        <span id="priceTitle" class="tit">换购价：</span>
	        <span id="priceSale" class="price" >¥${bean.cardprice}</span>
	        
	        <span id="headEval" class="col_right">
	            <span class="sale_num">市场价：<del class="old_price"><em id="priceMarket">¥${bean.marketPrice}</em></del>
	        </span>
	    </div>
	    <div style="display: none" id="priceExp" class="price_wrap"></div>
	    
	    <div id="skuCont" class="sku_container sku_container_on">
	        <div class="sku_wrap">            
	            <div id="propertyDiv">
		            <div class="sku">
		            <h3>品牌</h3>
		            <div class="sku_list">
			            <span class="option">${bean.pinpai}</span>
		            </div>
		            </div>
	            </div>
	        </div>
	        <div class="sku_wrap">            
	            <div id="propertyDiv">
		            <div class="sku">
		            <h3>型号</h3>
		            <div class="sku_list">
			            <span class="option">${bean.guige}</span>
		            </div>
		            </div>
	            </div>
	        </div>
	        
	        <div class="sku_wrap">
	            <div id="skuNum" class="sku sku_num">
	                <h3>数量</h3>
	                <div class="num_wrap">
	                    <span  id="minus" class="minus minus_disabled"></span>
	                    <input type="tel" value="1" id="buyNum" onkeyup="check();"  maxLimit="2" class="num">
	                    <span  id="plus"  class="plus"></span>
	                </div>
	            </div>
	        </div>
	        
	    </div>
	    
	    <div class="buy_btns">
			<div class="btn-pane">
				<a onclick="addToCart()" class="buy_btn btn-warning">加入购物车</a>
			</div>
			<div class="btn-pane">
				<a onclick="buyNow()" class="buy_btn btn-danger">&nbsp;凭卡预订&nbsp;</a>
			</div>
		</div>
    

	    <div style="display:none" id="skuNotice" class="sku_tip">
	        <span id="skuTitle2"></span>
	    </div>
	
	    <div id="serviveArea" class="service_wrap">
	        <div id="shopInfoP" class="hd">
	            <h3>商品详细说明</h3>
	            <p>${bean.detailInfo} </p>
	        </div>
	    </div>
	</div>
</div>	
	<script id="test" type="text/html">

	</script>
	<script>
	  
	  $(function(){
		     var images="${bean.imageUrl}"
			 var img=images.split(",");
			 var html="";
			 if(img.length>0){
			  	  for(var i=0;i<img.length;i++){
			  		  if(img[i])
					  html+='<img src='+img[i]+' onerror="this.src=\'${pageContext.request.contextPath}/bettery/img/category.jpg\'"	style="height: 200px; width: 160px">';
				  }
			  	  $("#slider").html(html);
			 }
	  
			var size = $("#slider img").size();
	        $("#slider").bxSlider({slideWidth:300, minSlides:2, maxSlides:3, moveSlides:1, controlsvdsa:false, controls:false, pager:false, });
	        
	        	$("#plus").click(function () {
					var maxLimit=$("#buyNum").attr("maxLimit");
					var val = parseInt($("#buyNum").val()) + 1;
					if(maxLimit){
						if(parseInt(maxLimit,10)>=parseInt(val,10)){
							$("#buyNum").val(val);
							if(parseInt(maxLimit,10)==parseInt(val,10)){
								$("#plus").addClass("plus_disabled");
							}else{
								$("#plus").removeClass("plus_disabled");
							}
						}
					}else{
						$("#buyNum").val(val);
						
					}
				});
				$("#minus").click(function () {
					var val = parseInt($("#buyNum").val()) - 1;
					if (val > 0) {
						$("#buyNum").val(val);
					}
					if(val>1){
						$("#minus").removeClass("minus_disabled");
					}
				});
		});
	  function check(){
		  var maxLimit=$("#buyNum").attr("maxLimit");
		  var val = parseInt($("#buyNum").val());
		  var r = /^\+?[1-9][0-9]*$/;　　//正整数 
			if(!r.test(val)){
				$("#buyNum").val(1);
			}else{
				if(maxLimit){
					if(parseInt(maxLimit,10)>=parseInt(val,10)){
							$("#buyNum").val(val);
							if(parseInt(maxLimit,10)==parseInt(val,10)){
								$("#plus").addClass("plus_disabled");
							}else{
								$("#plus").removeClass("plus_disabled");
							}
					  }else{
						$("#buyNum").val(maxLimit);
					  }
				}else{
					$("#buyNum").val(val);
				}
			}
	  }
	  function buyNow(){
		  var lat=$("#hiddenbLat").val();
		  var lng=$("#hiddenbLng").val();
		  
		  //去指定地址界面
		  this.location.href="queryAddress.do?ids="+$("#hiddenId").val()+"&buyNums="+$("#buyNum").val()+"&lat="+lat+"&lng="+lng;
	  }
	  function addToCart(){
			$.ajax({url:"addToCar.do?t="+(new Date()), type:"post",
			    data:{"goodId":$("#hiddenId").val(), "buyNum":$("#buyNum").val()},
			    dataType:"json", 
			    success:function (data) {
				if (data.success) {
					$("#dialog").dialog({modal:true,
						title:"添加成功",
					    buttons:{
						"再逛逛":function () {
						$("#dialog").dialog("close");},
						"立即结算":function () {
						location.href = "queryMyCar.do?t="+(new Date());
					    }}});
				} else {
					alert("添加失败");
				}
			}});
	  }
	</script>
		<div id='dialog' style="display: none">
			<div>
				<span style="vertical-align: middle;">成功添加商品！</span>
			</div>
		</div>
</body>
</html>